<template>
  <div id="Login">
    <div class="Login">
      <div class="LoginHeader">
        <span>管理系统</span>
      </div>
      <div class="LoginInner">
        <!-- 用户名 -->
        <div class="username">
          <span>用户名:</span>
          <el-input v-model="username" placeholder="请输入内容"></el-input>
        </div>
        <!-- 密码 -->
        <div class="password">
          <span>密码:</span>
          <el-input
            show-password
            v-model="password"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <!-- 验证码 -->
        <div class="captcha">
          <span>验证码:</span>
          <el-input v-model="captcha" placeholder="请输入内容"></el-input>
          <img @click="flushCaptcha()" :src="captchaURL" alt="123" />
        </div>
        <!-- 底部按钮 -->
        <div class="LoginBtn">
          <el-button @click="Login()" type="primary" plain>登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/userAPI.js";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      captcha: "",
      captchaURL: "/yjk/user/captcha",
    };
  },
  methods: {
    //   点击刷新验证码
    flushCaptcha: function () {
      this.captchaURL = "/yjk/user/captcha?id=" + new Date();
    },
    // 登录
    Login: function () {
      var txt = new RegExp(/["'<>%;)(&\\*^/+@]/);
      if (txt.test(this.username)) {
        this.$message({
          message: "用户名中包含非法字符,请重新输入",
          type: "error",
        });
        return;
      }
      if (this.password == "") {
        this.$message({
          message: "密码不能为空",
          type: "error",
        });
        return;
      }
      login(this.username, this.password, this.captcha).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "登陆成功",
            type: "success",
          });
          localStorage.setItem("id", res.data.userId);
          this.$router.push({
            path: "/index",
            query: {
              user: res.data,
            },
          });
          console.log(res);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
          this.flushCaptcha();
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
#Login {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #2155bf;
  height: calc(100vh);
  overflow: hidden;
  .Login {
    margin: calc(25vh) auto;
    background-color: white;
    width: 600px;
    height: 320px;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 头部Logo
    .LoginHeader {
      height: 50px;
      width: 300px;
      margin: 0 auto;
      background-color: #8ad8ff;
      border-bottom-right-radius: 15px;
      border-end-start-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        letter-spacing: 10px;
        font-size: 20px;
        font-weight: 550;
      }
    }
    // 登录输入框和按钮
    .LoginInner {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .username,
      .password,
      .captcha {
        margin-top: 10px;
        width: 300px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input {
          margin-left: 10px;
          width: 230px;
        }
      }
      //   密码框
      .password {
        .el-input {
          margin-left: 26px;
        }
      }
      //   验证码
      .captcha {
        .el-input {
          width: 100px;
        }
      }
      // 提交按钮
      .LoginBtn {
        margin-top: 10px;
        .el-button {
          width: 100px;
        }
      }
    }
  }
}
</style>